<template>
  <div id="wheel_div">
    <canvas
      id="myCanvas"
      width="1264"
      height="984"
    ></canvas>
    <FabricView
      v-for="item of dataList"
      :data="item"
      :key="item.id"
    >
    </FabricView>
  </div>
</template>

<script>
import FabricView from "./test.vue";
import { fabric } from "fabric";
export default {
  components: {
    FabricView,
  },
  data() {
    return {
      dataList: [
        {
          id: "LBS-1",
          name: "负载均衡服务器LBS-1",
          Internet: "39.99.165.58 1",
          status: "normal",
          x: 500,
          y: 56,
        },
        {
          id: "LBS-2",
          name: "负载均衡服务器LBS-2",
          Internet: "39.99.135.1361",
          intranet: "172.26.137.195",
          status: "error",
          x: 736,
          y: 56,
        },
        {
          id: "port-2",
          name: "负载均衡服务器LBS-2",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "warning",
          x: 500,
          y: 188,
        },
        {
          id: "API",
          name: "负载均衡服务器LBS-2",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 736,
          y: 188,
        },
        {
          id: "API1",
          name: "负载均衡服务器LBS-2",
          Internet: "39.99.135.136",
          intranet: "172.26.137.195",
          status: "normal",
          x: 618,
          y: 255,
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.initContainer();
    });
  },
  methods: {
    initContainer() {
      const canvas = new fabric.Canvas("myCanvas");
      let rect = this.drawRect({
        left: -130,
        top: 650,
        width: 600,
        height: 1100,
      });
      canvas.add(rect); //添加图形至canvas画布
      // let str = "业务服务器集群",
      //   str2 = "管理服务器集群";
      // for (let item = 0; item < str.length; item++) {
      //   let textPath = this.makeText(str[item], {
      //     top: 550 + item * 36,
      //     left: 1270,
      //   });
      //   canvas.add(textPath);
      // }
      // for (let item = 0; item < str2.length; item++) {
      //   let textPath = this.makeText(str2[item], {
      //     top: 550 + item * 36,
      //     left: 1370,
      //   });
      //   canvas.add(textPath);
      // }

      let lineData = [
        // 创建一个坐标100，190，尺寸是20，20的矩形  left, top, width, height
        [580, 140, 795, 255], //横 负载均衡右
        [580, 250, 795, 140], //竖 负载均衡右
      ];
      for (let item of lineData) {
        let line = this.makeLine(item);
        // 将线条添加到canvas画布上
        canvas.add(line);
      }
      var rect2 = this.drawRect({
        left: 850,
        top: 450,
        width: 300,
        height: 400,
      });
      canvas.add(rect2);

      var Line = this.makeLine({});
      canvas.add(Line);
    },
    drawRect(data) {
      //绘制矩形边框
      return new fabric.Rect({
        left: data.left,
        top: data.top,
        fill: "rgba(75, 138, 215, 0.2)",
        stroke: "#00A5C3",
        strokeWith: 2,
        strokeDashArray: ["#00A5C3", "#624CBB", "#3263C7", "#00A5C3"],
        width: data.width,
        height: data.height,
        rx: 50,
        ry: 50,
        angle: -60,
        // calcTranslateMatrix: [1, -0.5, 0.08, 1, 140, 160],
      });
    },
    makeLine(coords) {
      // 绘制线段连线路径
      return new fabric.Line(coords, {
        stroke: "#4B8AD7",
        strokeWidth: 1,
        selectable: false,
        evented: false,
      });
    },
  },
};
</script>


<style lang='less' scoped>
#wheel_div {
  position: relative;
  width: 1264px;
  height: 984px;
  margin: 1%;
  border: 1px solid #3368b8;
  border-radius: 5px;
  text-align: center;
  color: #f7560b;
  padding: 15px;
}
#myCanvas {
  z-index: 1;
}
</style>